<template>
  <div class="index">
    <div class="deerAnimee">
      <div class="title"></div>
    </div>
    <div class="module_box">
      <div class="health" @click.stop.prevent="goHealth">
        <div class="module_left">
          <div class="left_text">医疗健康</div>
          <img
            class="left_img"
            src="@/assets/classificationImg/health_subscript.png"
            alt=""
          />
        </div>
        <img
          class="module_right"
          src="@/assets/classificationImg/health_icon.png"
          alt=""
        />
      </div>
      <div class="society">
        <div class="module_left">
          <div class="left_text">社会保障</div>
          <img
            class="left_img"
            src="@/assets/classificationImg/society_subscript.png"
            alt=""
          />
        </div>
        <img
          class="module_right"
          src="@/assets/classificationImg/society_icon.png"
          alt=""
        />
      </div>
      <div class="life">
        <div class="module_left">
          <div class="left_text">生活缴费</div>
          <img
            class="left_img"
            src="@/assets/classificationImg/life_subscript.png"
            alt=""
          />
        </div>
        <img
          class="module_right"
          src="@/assets/classificationImg/life_icon.png"
          alt=""
        />
      </div>
      <div class="traffic">
        <div class="module_left">
          <div class="left_text">交通出行</div>
          <img
            class="left_img"
            src="@/assets/classificationImg/traffic_subscript.png"
            alt=""
          />
        </div>
        <img
          class="module_right"
          src="@/assets/classificationImg/traffic_icon.png"
          alt=""
        />
      </div>
      <div class="shopping">
        <div class="module_left">
          <div class="left_text">购物消费</div>
          <img
            class="left_img"
            src="@/assets/classificationImg/shopping_subscript.png"
            alt=""
          />
        </div>
        <img
          class="module_right"
          src="@/assets/classificationImg/shopping_icon.png"
          alt=""
        />
      </div>
    </div>
    <van-overlay :show="show" >
      <div class="wrapper" @click.stop="show = false">
        <div class="block">
          <div class="image">
            <!-- <svg-icon icon-class="arrows" style="font-size: 50px;"></svg-icon> -->
          </div>
          <div class="content">
            <div>1.点击右上角 <span>...</span></div>
            <div>2.选择浏览器打开</div>
            <div>3.点击转发按钮</div>
          </div>
        </div>
      </div>
    </van-overlay>
    <div class="goShare" v-if="isBtun"  @click.stop="show = true">邀请好友共同体验</div>
  </div>
</template>
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
import VanOverlay from "vant/lib/overlay";
import "vant/lib/overlay/style";
// 引入wxjs
import wx from "weixin-js-sdk";
export default {
  name: "index",
  components: {
    VanOverlay,
  },
  data() {
    return {
      show: false,
      isBtun: false,
    };
  },
  created() {
    const ua = navigator.userAgent.toLowerCase()
    // 判断是否在微信浏览器
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
      this.isBtun = true;
    }else {
      this.isBtun = false;
    }
  },
  mounted() {},

  methods: {
    async goClassification() {
      const share = {
        title: "每日新闻",
        desc: "2022年12月20日21:47:55每日新闻",
        share_url: "https://blogobs.88688.team/blog/l-logo-y.jpg",
      };
      location.replace(
        "https://connect.qq.com/widget/shareqq/index.html?url=" +
          encodeURIComponent(share.share_url) +
          "&title=" +
          share.title +
          "&desc=" +
          share.desc
      );
    },
    async goHealth() {
      this.$router.push({
        path: "/health/healthIndex",
      });
    },
    getShareInfo() {
      //获取url链接（如果有#需要这么获取）
      var url = encodeURIComponent(window.location.href.split("#")[0]);
      //获取url链接（如果没有#需要这么获取）
      // var url = encodeURIComponent(window.location.href);
      if (typeof url === "string") {
        console.log("str 是字符串类型");
      } else {
        console.log("str 不是字符串类型");
      }
      getData(url).then((res) => {
        console.log(res);
        wx.config({
          debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
          appId: res.data.appId, // 必填，公众号的唯一标识
          timestamp: parseInt(res.data.timestamp), // 必填，生成签名的时间戳
          nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
          signature: res.data.signature, // 必填，签名
          jsApiList: ["onMenuShareAppMessage", "onMenuShareTimeline"], // 必填，需要使用的 JS 接口列表
        });
        wx.ready(() => {
          //自定义“分享给朋友”及“分享到QQ”按钮的分享内容
          wx.onMenuShareAppMessage({
            title: "每日新闻",
            desc: "2022年12月20日21:47:55每日新闻",
            link: "http://www.ruizhihuitech.com/",
            imgUrl: "https://blogobs.88688.team/blog/l-logo-y.jpg",
            type: "", // 分享类型,music、video或link，不填默认为link
            dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {},
            fail: function (reject) {
              alert(JSON.stringify(reject), "失败");
            },
          });
          //获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）
          wx.onMenuShareTimeline({
            title: "每日新闻",
            desc: "2022年12月20日21:47:55每日新闻",
            link: "http://www.ruizhihuitech.com/",
            imgUrl: "https://blogobs.88688.team/blog/l-logo-y.jpg",
            type: "", // 分享类型,music、video或link，不填默认为link
            dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {},
          });
        });
        //错误了会走 这里
        wx.error(function (res) {
          console.log("微信分享错误信息", res);
          // alert('ready 失败:', res);
        });
      });
    },
    openShare() {
      this.getShareInfo();
    },
  },
};
</script>

<style scoped lang="less">
.index {
  position: relative;
  width: 100%;
  height: 100%;
  background: url(@/assets/classificationImg/classificationImg_bg.png) no-repeat
    center;
  background-size: 100% 100%;
}
@media screen and (min-width: 440px) {
  .deerAnimee {
    position: absolute;
    top: 27px;
    left: 40px;
    width: 90px;
    height: 90px;
    background: url("@/assets/classificationImg/deer.gif") no-repeat;
    background-size: 100% 100%;
    z-index: 1;
  }
  .title {
    position: absolute;
    top: 35px;
    left: -5px;
    width: 308px;
    height: 142px;
    background: url(@/assets/classificationImg/classificationImg_title.png)
      no-repeat center;
    background-size: 100% 100%;
    z-index: 9;
  }
  .module_box {
    position: absolute;
    top: 225px;
    left: 50%;
    transform: translate(-50%);
    max-height: 365px;
    overflow-y: auto;
    padding: 0 5px;
    .health {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 335px;
      height: 75px;
      border-radius: 7.5px;
      background: linear-gradient(90deg, #0d7dfb 0%, #70c7fe 100%);
      margin-bottom: 15px;
      .module_left {
        display: flex;
        align-items: flex-end;
        .left_text {
          font-family: FZLanTingHeiS-DB-GB;
          font-weight: 400;
          font-size: 20px;
          color: #ffffff;
          line-height: 18.5px;
          margin-right: 15px;
        }
        .left_img {
          width: 25px;
          height: 15px;
        }
      }
      .module_right {
        width: 70px;
        height: 57.5px;
      }
    }
    .society {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 335px;
      height: 75px;
      border-radius: 7.5px;
      background: linear-gradient(-90deg, #70e4c4 0%, #35c5a6 100%);
      margin-bottom: 15px;
      .module_left {
        display: flex;
        align-items: flex-end;
        .left_text {
          font-family: FZLanTingHeiS-DB-GB;
          font-weight: 400;
          font-size: 20px;
          color: #ffffff;
          line-height: 18.5px;
          margin-right: 15px;
        }
        .left_img {
          width: 25px;
          height: 15px;
        }
      }
      .module_right {
        width: 70px;
        height: 57.5px;
      }
    }
    .life {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 335px;
      height: 75px;
      border-radius: 7.5px;
      background: linear-gradient(-90deg, #fed08e 0%, #f68f05 100%);
      margin-bottom: 15px;
      .module_left {
        display: flex;
        align-items: flex-end;
        .left_text {
          font-family: FZLanTingHeiS-DB-GB;
          font-weight: 400;
          font-size: 20px;
          color: #ffffff;
          line-height: 18.5px;
          margin-right: 15px;
        }
        .left_img {
          width: 25px;
          height: 15px;
        }
      }
      .module_right {
        width: 70px;
        height: 57.5px;
      }
    }
    .traffic {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 335px;
      height: 75px;
      border-radius: 7.5px;
      background: linear-gradient(90deg, #fd6456 0%, #ffaf91 100%);
      margin-bottom: 15px;
      .module_left {
        display: flex;
        align-items: flex-end;
        .left_text {
          font-family: FZLanTingHeiS-DB-GB;
          font-weight: 400;
          font-size: 20px;
          color: #ffffff;
          line-height: 18.5px;
          margin-right: 15px;
        }
        .left_img {
          width: 25px;
          height: 15px;
        }
      }
      .module_right {
        width: 70px;
        height: 57.5px;
      }
    }
    .shopping {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 335px;
      height: 75px;
      border-radius: 7.5px;
      background: linear-gradient(-90deg, #fd91c9 0%, #fb529a 100%);
      margin-bottom: 15px;
      .module_left {
        display: flex;
        align-items: flex-end;
        .left_text {
          font-family: FZLanTingHeiS-DB-GB;
          font-weight: 400;
          font-size: 20px;
          color: #ffffff;
          line-height: 18.5px;
          margin-right: 15px;
        }
        .left_img {
          width: 25px;
          height: 15px;
        }
      }
      .module_right {
        width: 70px;
        height: 57.5px;
      }
    }
  }

  .goShare {
    cursor: pointer;
    width: 205px;
    height: 57px;
    position: absolute;
    top: 625px;
    left: 50%;
    transform: translate(-50%);
    background: url(@/assets/classificationImg/classificationImg_button.png)
      no-repeat center;
    background-size: 100% 100%;

    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 19px;
    color: #a00000;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
@media screen and (max-width: 440px) {
  .deerAnimee {
    position: absolute;
    top: 30px;
    left: 80px;
    width: 180px;
    height: 180px;
    background: url("@/assets/classificationImg/deer.gif") no-repeat;
    background-size: 100% 100%;
    z-index: 1;
  }
  .title {
    position: absolute;
    top: 60px;
    left: -10px;
    width: 617px;
    height: 285px;
    background: url(@/assets/classificationImg/classificationImg_title.png)
      no-repeat center;
    background-size: 100% 100%;
    z-index: 9;
  }

  .module_box {
    position: absolute;
    top: 410px;
    left: 50%;
    transform: translate(-50%);
    max-height: 770px;
    overflow-y: auto;
    padding: 0 10px;
    .health {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 670px;
      height: 150px;
      border-radius: 15px;
      background: linear-gradient(90deg, #0d7dfb 0%, #70c7fe 100%);
      margin-bottom: 30px;
      .module_left {
        display: flex;
        align-items: flex-end;
        .left_text {
          font-family: FZLanTingHeiS-DB-GB;
          font-weight: 400;
          font-size: 40px;
          color: #ffffff;
          line-height: 39px;
          margin-right: 30px;
        }
        .left_img {
          width: 50px;
          height: 30px;
        }
      }
      .module_right {
        width: 140px;
        height: 115px;
      }
    }
    .society {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 670px;
      height: 150px;
      border-radius: 15px;
      background: linear-gradient(-90deg, #70e4c4 0%, #35c5a6 100%);
      margin-bottom: 30px;
      .module_left {
        display: flex;
        align-items: flex-end;
        .left_text {
          font-family: FZLanTingHeiS-DB-GB;
          font-weight: 400;
          font-size: 40px;
          color: #ffffff;
          line-height: 39px;
          margin-right: 30px;
        }
        .left_img {
          width: 50px;
          height: 30px;
        }
      }
      .module_right {
        width: 140px;
        height: 115px;
      }
    }
    .life {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 670px;
      height: 150px;
      border-radius: 15px;
      background: linear-gradient(-90deg, #fed08e 0%, #f68f05 100%);
      margin-bottom: 30px;
      .module_left {
        display: flex;
        align-items: flex-end;
        .left_text {
          font-family: FZLanTingHeiS-DB-GB;
          font-weight: 400;
          font-size: 40px;
          color: #ffffff;
          line-height: 39px;
          margin-right: 30px;
        }
        .left_img {
          width: 50px;
          height: 30px;
        }
      }
      .module_right {
        width: 140px;
        height: 115px;
      }
    }
    .traffic {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 670px;
      height: 150px;
      border-radius: 15px;
      background: linear-gradient(90deg, #fd6456 0%, #ffaf91 100%);
      margin-bottom: 30px;
      .module_left {
        display: flex;
        align-items: flex-end;
        .left_text {
          font-family: FZLanTingHeiS-DB-GB;
          font-weight: 400;
          font-size: 40px;
          color: #ffffff;
          line-height: 39px;
          margin-right: 30px;
        }
        .left_img {
          width: 50px;
          height: 30px;
        }
      }
      .module_right {
        width: 140px;
        height: 115px;
      }
    }
    .shopping {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 670px;
      height: 150px;
      border-radius: 15px;
      background: linear-gradient(-90deg, #fd91c9 0%, #fb529a 100%);
      margin-bottom: 30px;
      .module_left {
        display: flex;
        align-items: flex-end;
        .left_text {
          font-family: FZLanTingHeiS-DB-GB;
          font-weight: 400;
          font-size: 40px;
          color: #ffffff;
          line-height: 39px;
          margin-right: 30px;
        }
        .left_img {
          width: 50px;
          height: 30px;
        }
      }
      .module_right {
        width: 140px;
        height: 115px;
      }
    }
  }

  .goShare {
    cursor: pointer;
    width: 410px;
    height: 115px;
    position: absolute;
    top: 1185px;
    left: 50%;
    transform: translate(-50%);
    background: url(@/assets/classificationImg/classificationImg_button.png)
      no-repeat center;
    background-size: 100% 100%;

    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 38px;
    color: #a00000;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 100%;
    position: relative;
    font-size: 40px;
    .image {
      position: absolute;
      right: 30px;
      top: 10px;
    }
    .content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: center;
      flex-wrap: wrap;
      margin-top: 100px;
      color: #fff;
      div {
        span {
          font-size: 50px;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
